<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
            position: absolute;
        }
    </style>
</head>

<body>

    <div class="box"></div>

    <script>

        // 拖拽：鼠标按下，鼠标移动，鼠标松开
        //       mousedown  mousemove   mouseup

        // 鼠标按下的时候，获取鼠标在盒子中的位置

        var oDiv = document.querySelector('.box');
        oDiv.onmousedown = function (e) {
            // 鼠标按下的时候  获取鼠标在盒子中的位置
            var gapX = e.offsetX;
            var gapY = e.offsetY;
            // console.log(111);

            // 绑定移动事件的时候，由于鼠标移动速度非常快，盒子跟不上(设置样式需要时间) -- '跟丢了'
            // 给文档绑定事件
            document.onmousemove = function (e) {
                // console.log(222);
                var x = e.x - gapX;
                var y = e.y - gapY;

                oDiv.style.left = x + 'px';
                oDiv.style.top = y + 'px';

                document.onmouseup = function () {

                    console.log(333);
                    // 移动事件删除
                    document.onmousemove = null;

                    // 移除事件本身
                    document.onmouseup = null;

                    // 验证 是否到最右边
                }
            }

        }



    </script>

</body>

</html>